<template>
  <div class="largeScreen_main">
    <div class="largeScreen_header">
      <div class="largeScreen_header_title">电量同比分析 kWh</div>
      <div v-if="tableData&&tableData.length>0" class="largeScreen_header_right">
        <a class="choose_item power0" :class="!power0_show?'disabled':''" @click="power0_show = !power0_show">
          <div class="choose_item_tag" />
          <div class="choose_item_name">同期</div>
        </a>
        <a class="choose_item power1" :class="!power1_show?'disabled':''" @click="power1_show = !power1_show">
          <div class="choose_item_tag" />
          <div class="choose_item_name">本期</div>
        </a>
      </div>
    </div>

    <div v-if="tableData&&tableData.length>0" class="echarts_container">
      <div id="echartsId" style="height: 100%;width: 100%" />
    </div>
    <div v-else class="echarts_noData">
      <svg-icon icon-class="暂无数据" />
    </div>

  </div>
</template>

<script>
import { comparedElectric } from '@/api/system/largeScreen'
import { mapGetters } from 'vuex'
export default {
  props: {
  },
  computed: {
    ...mapGetters([
      'windowResizeTag'
    ])
  },
  watch: {
    power0_show() {
      this.drawLine()
    },
    power1_show() {
      this.drawLine()
    },
    windowResizeTag() {
      if (this.myChart) {
        this.$nextTick(() => {
          setTimeout(() => {
            this.drawLine()
          }, 500)
        })
      }
    }
  },
  data() {
    return {
      tableData: [],
      myChart: undefined,

      power0_show: true,
      power1_show: true,

      timer: undefined
    }
  },
  beforeDestroy() {
    clearInterval(this.timer)
  },
  mounted() {
    this.getData()
    this.timer = setInterval(() => {
      this.getData()
    }, this.$store.state.common.refreshFrequency * 1000)
  },
  methods: {
    getData() {
      comparedElectric({ companyId: this.$store.state.user.companyId }).then(res => {
        const resData = this.$deepClone(res.data)
        this.tableData = resData

        this.$nextTick(() => {
          this.drawLine()
        })
      })
    },
    drawLine() {
      if (this.myChart) {
        this.$echarts.init(document.getElementById('echartsId')).dispose()
      }
      this.myChart = this.$echarts.init(document.getElementById('echartsId'))
      const option = {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        grid: {
          left: '8%',
          top: '20',
          right: '20',
          bottom: '40'
        },
        xAxis: {
          data: this.tableData.map(item => item.date.charAt(0) == '0' ? item.date.substr(1, item.date.length - 1) : item.date),
          axisLine: {
            show: false // 隐藏X轴轴线
          },
          axisTick: {
            show: false, // 隐藏X轴刻度
            alignWithLabel: true
          },
          axisLabel: {
            show: true,
            textStyle: {
              color: '#666666', // X轴文字颜色
              fontSize: 14
            }
          }
        },
        yAxis: {
          type: 'value',
          name: '',
          nameTextStyle: {
            color: '#666666',
            fontSize: 14
          },
          axisTick: {
            show: false
          },
          axisLine: {
            show: false, // 隐藏X轴轴线
            lineStyle: {
              color: '#999999'
            }
          },
          axisLabel: {
            show: true,
            textStyle: {
              color: '#666666',
              fontSize: 14
            }
          }
        }
      }
      const series = []

      if (this.power0_show) {
        series.push(

          {
            name: '同期',
            type: 'bar',
            barWidth: 12,
            barGap: '-10%',
            itemStyle: {
              normal: {
                color: '#CEEBFF',
                barBorderRadius: [20, 20, 0, 0]
              }
            },
            data: this.tableData.map(item => item.preElectric)
          }
        )
      }
      if (this.power1_show) {
        series.push(
          {
            name: '本期',
            type: 'bar',
            barWidth: 12,
            itemStyle: {
              normal: {
                color: '#4EB5FF',
                barBorderRadius: [20, 20, 0, 0]
              }
            },
            data: this.tableData.map(item => item.currentElectric)
          }
        )
      }
      option.series = series
      this.myChart.setOption(option)
    }
  }
}
</script>

<style lang="less" scoped>
.largeScreen_main{
  width: 100%;
  height: 100%;
}
  .largeScreen_header{
    display: flex;
    justify-content: space-between;
    .largeScreen_header_title{
      font-size: 20px;
      height: 60px;display: flex;align-items: center;
      font-weight: bold;
      color: #333333;
      padding-left: 20px;
    }
    .largeScreen_header_right{
      font-size: 16px;
      padding-right: 20px;
      height: 60px;display: flex;align-items: center;
    }
  }
  .echarts_container,.echarts_noData{
    width: 100%;
    height: calc(100% - 60px);
  }

  .choose_item{
    display: flex;justify-content: center;align-items: center;
    margin-left: 40px;
    .choose_item_tag{
      margin-right: 20px;
      width: 40px;height: 15px;
      border-radius: 4px;
      box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.3);
    }
    .choose_item_name{

    }
  }
  .power0{
    .choose_item_tag{
      background-color: #CEEBFF;
    }
  }
  .power1{
    .choose_item_tag{
      background-color: #4EB5FF;
    }
  }
  .disabled{
    .choose_item_tag{
      background-color: darkgrey;
    }
    .choose_item_name{
      color: darkgrey;
    }
  }

</style>

